/*公共样式*/
*{
    padding: 0;
    margin: 0;
    font-size: 13px;
}
a{
    text-decoration: none;
}
ul,li{list-style: none;}
body{
    background: #f5f8f9;
}
.center{
    width: 1200px;
    margin: 0 auto;
}
.btn{
    width: 110px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #f92525;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
}
.btn:hover{
    background: #a81b1b;
}

/*头部*/
.header{
    height: 100px;
    background: #fff;
    display: flex;
    align-items: center;
    .box{
        display: flex;
    }
    .left{
        flex: 1;
    }
    .right{
        display: flex;
        align-items: center;
        .set,.new{
            width: 18px;
            height: 18px;
            background: url(../img/icon.png);
        }
        .new{
            background-position: 18px 0;
            margin-left: 20px;
        }
        .logout{
            margin-left: 40px;
        }
    }
}

/*导航栏*/
.nav{
    height: 130px;
    display: flex;
    padding-top: 40px;
}
.nav-box{
    display: flex;
    align-items: center;
    .left{
        flex: 1;
        .p1{
            font-size: 30px;
        }
        .p2{
            font-size: 16px;
        }
    }
    .right{
        position: relative;
        ul{
            display: flex;
            li{
                width: 80px;
                line-height: 40px;
                text-align: center;
                a{
                    font-size: 16px;
                }
            }
        }
        .nav-line{
            width: 80px;
            height: 2px;
            background: #cccfd0;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
}

.content{
    .cont-box{
        display: flex;
        margin-bottom: 20px;
    }
    #banner{
        flex: 1;
        background: #fff;
        padding: 10px;
        margin-right: 20px;
        width: 600px;
        overflow: hidden;
        position: relative;
        .prev,.next{
            background: #03050f;
            width: 30px;
            height: 40px;
            color: #fff;
            line-height: 40px;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            cursor: pointer;
            font-size: 20px;
            opacity: 0.6;
        }
        .prev{
            left: 15px;
        }
        .next{
            right: 15px;
            text-align: right;
        }

        #icoList{
            display: flex;
            position: absolute;
            bottom: 27px;
            left: 50%;
            transform: translate(-50%, 0);
            li{
                width: 10px;
                height: 10px;
                background: #c1c4c6;
                margin-right: 8px;
                cursor: pointer;
            }
        }
    }
    #imglist{
        display: flex;
        width: 1800px;
        img{
            width: 600px;
        }
    }
    .info{
        flex: 1;
        background: #fff;
        .title{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #efeff0;
            padding: 0 48px;
            align-items: center;
        }
        .left{
            height: 110px;
            line-height: 110px;
            font-size: 18px;
        }
        .right{
            width: 95px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #efeff0;
            border-radius: 3px;
            text-align: center;
        }
        .cont{
            display: flex;
            line-height: 70px;
            font-weight: bold;
            padding: 0 50px;
            .c1{
                flex: 1;
            }
            .c2{
                flex: 2;
            }
        }
        .list{
            display: flex;
            padding: 0 50px;
            margin-bottom: 16px;
            align-items: center;
            .l1{
                flex: 1;
            }
            .l2{
                flex: 2;
            }
            .l3{
                width: 65px;
                height: 30px;
                background: #5dd054;
                border-radius: 3px;
                color: #fff;
                text-align: center;
                line-height: 30px;
            }
        }
    }
}

.echarts{
    background: #fff;
    padding-top: 30px;
    margin-bottom: 20px;
    #line{
        height: 350px
    }
}

#pie,#bar{
    background: #fff;
    padding-top: 30px;
    height: 380px;
    flex: 1
}

.footer{
    background: #202124;   
    padding: 80px; 
    .footerBox{
        display: flex;
    }
    .logo{
        margin-right: 80px;
    }
    ul{
        font-weight: bold;
        li{
            margin-bottom: 20px;
            a{
                color: #fff;
                margin-right: 110px;
            }
        }
        
    }
}

/*弹出框*/
.maskBox{
    display: none;
    .content{
        width: 300px;
        background: #fff;
        border-radius: 10px;
        z-index: 10;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
    }
    .logout-btn{
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        cursor: pointer;
    }
    .yes,.no{
        width: 95px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #efeff0;
        border-radius: 3px;
        text-align: center;
    }
    .mask{
        width: 100%;
        height: 100%;
        background: #333;
        opacity: 0.5;
        position: absolute;
        left: 0;
        top: 0;
    }
}

